<template>
  <view>
    <view class="box-bg" v-bind:style="{'padding-top':allHeight+'rpx'}">
      <uni-nav-bar left-icon="left" @clickLeft="goBack" color="#000">
        <view class="input-view">
          <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
          <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" v-model="searchName"
            @confirm="confirm" />
          <text v-if="searchName" class="icon_close" @click="closeFn">×</text>
        </view>
      </uni-nav-bar>
      <view class="qf_filterBarWrapper" style="position: relative;">
        <view class="qf_filterBarWrapper-item"
          v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'weight' && tabType == '' }"
          @click="tabChange('weight')">
          综合
        </view>
        <view class="qf_filterBarWrapper-item" v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'sale'}"
          @click="tabChange('sale')">
          销量
        </view>
        <view class="qf_filterBarWrapper-item"
          v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'priceup' || sortName == 'pricedown'}"
          @click="tabChange('价格')">
          <text>价格</text>
          <uni-icons v-bind:type="typePrice" size="10">
          </uni-icons>
        </view>
        <view class="qf_filterBarWrapper-item" v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'uptime'}"
          @click="tabChange('uptime')">
          上架时间
        </view>
      </view>
    </view>
    <view class="dota-main">
      <view class="dotaLts">
        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :top="270">
          <!-- 加载列表 -->
          <view class="dotaLts-item" v-for="(item,index) in dataList" v-bind:key="index" @click="gotoDetail(item)">
         <text class="news-sm" v-if="(item.Goods_flag & 8) == 8"></text>
         <text class="hot-sm" v-if="(item.Goods_flag  & 16) == 16"></text>
         <text class="rec-sm" v-if="(item.Goods_flag & 512) == 512"></text>
            <image v-bind:src="item.Goods_imgPath" mode="aspectFill"></image>
            <view class="product-info">
              <view class="product-name">
                {{item.Goods_disName}}
              </view>

              <view class="product-desc">
                {{item.Goods_profile.length>23 ? item.Goods_profile.substring(0,20)+'……':item.Goods_profile}}
              </view>
              <!---->
              <view class="product-tags" v-show="item.IsDiscount">
                限时折扣
              </view>
              <view class="product-price">
                <text class="product-price-type">￥</text>{{item.Goods_price}}<text
                  class="product-price-status">{{item.Unit}}</text>
                <text v-show="item.IsDiscount"
                  style="text-decoration:line-through;font-size: 26rpx;font-weight: 500;color: #999999;margin-left:10rpx;">
                  ￥{{item.Goods_Original_price}}
                  <text style="font-size:20rpx;font-weight: 500;color: #999999;">{{item.Unit}}</text>
                </text>
              </view>
              <view class="product-desc">
                <text style="color: #999999;">所属分类:{{item.Class_name}}</text>
               <text class="gm" @click.stop="buyNow(item)"></text>
              <!--  <text style="font-weight:bold;font-size:20rpx;" @click.self="enterShop(item.Class_id)">进入商店></text> -->
              </view>
            </view>
          </view>
          <!-- 加载列表 -->
        </mescroll-uni>
      </view>
    </view>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import checkLogin from '@/mixins/checkLogin.js'
  export default {
    mixins: [MescrollMixin,checkLogin],
    data() {
      return {
        allHeight: 0,
        titleBarHeight: 0,
        statusBarHeight: 0,
        info: '',
        cid: 0,
        flagId: 0,
        searchName: '',
        sortName: 'weight',
        pi: 1,
        ps: 10,
        dataList: [],
        total: 0,
        type: '',
        typePrice: 'bottom',
        tabType: '',
        modelFlag2: false,
      };
    },
    onLoad(options) {
      let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      uni.getSystemInfo({ //获取系统信息
        success: res => {
          let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
            2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
          this.titleBarHeight = navHeight;
          this.statusBarHeight = res.statusBarHeight
          this.allHeight = this.titleBarHeight + this.statusBarHeight;
        },
        fail(err) {
          console.log(err);
        }
      })
      this.searchName = decodeURI(options.name);
      this._seachFlagPager();

    },
    methods: {
      closeFn() {
        this.searchName = ''
      },
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      },
      confirm() {
        this._seachFlagPager();
      },
      //搜索列表
      _seachFlagPager() {
        uni.$http.get(
          `/query/QueryWebGoodsBySeachFlagPager?classid=${this.cid}&flag=${this.flagId}&search=${escape(this.searchName)}&sort=${this.sortName}&pi=${this.pi}&ps=${this.ps}`
        ).then(({
          data: res
        }) => {
          console.log(res);
          if (res.code == 0) {
            if (this.pi == 1) {
              this.dataList = [];
            }
            this.total = res.data.count;
            this.dataList = [...this.dataList, ...res.data.list];
            this.mescroll.endBySize(res.data.list.length, res.data.count);
            setTimeout(() => {
              this.mescroll.endSuccess(res.data.list.length);
            }, 20)

          } else {
            uni.$showMsg(res.msg)
          }
        })
      },
      upCallback(page) {
        this.pi = page.num;
        this._seachFlagPager();
      },
      tabChange(val) {
        if (val == 'weight') {
          this.sortName = 'weight';
          this.tabType = ''
          this.modelFlag2 = false;
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == 'sale') {
          this.sortName = 'sale';
          this.tabType = ''
          this.modelFlag2 = false;
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == '价格') {
          this.tabType = '';
          this.modelFlag2 = false;
          if (this.typePrice == 'bottom') {
            this.sortName = 'priceup';
            this.typePrice = 'top'
          } else if (this.typePrice == 'top') {
            this.sortName = 'pricedown';
            this.typePrice = 'bottom'
          }
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == 'uptime') {
          this.tabType = '';
          this.modelFlag2 = false;
          this.sortName = 'uptime';
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == '分类') {
          //debugger
          this.sortName = 'weight';
          this.tabType = 'check';
          this.modelFlag2 = true;
        }

      },
      changeCid(cid) {
        this.cid = cid;
        this.pi = 1;
        this.modelFlag2 = false;
        this._seachFlagPager();
      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.Goods_id
        })
      },
      enterShop(cid) {
        const dotaArr = [69, 70, 92, 135, 193, 230, 233, 281, 284, 313, 384, 476, 488, 489, 1904];
        const imbaArr = [18, 19, 20];
        const ptArr = [7, 11, 93, 95, 97, 435, 583, 592, 22, 23, 24, 59, 60];
        console.log(dotaArr.indexOf(cid))
        if (dotaArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/dota_view/dota_view'
          })
        } else if (imbaArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/imba_view/imba_view'
          })

        } else if (ptArr.indexOf(cid) >= 0) {
          return uni.navigateTo({
            url: '/subpkg/pt_view/pt_view'
          })
        } else {
          return uni.navigateTo({
            url: '/subpkg/rpg_view/rpg_view?cid=' + cid
          })
        }

      }
    }
  }
</script>

<style lang="scss">
  $nav-height: 64rpx;

  .box-bg {
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2;
    background-color: #fff;

    .tuku {
      width: 100%;
      height: 411rpx;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      height: 60rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      margin-top: 30rpx;
      color: #FFFFFF;

      .scroll-view_H_item {
        padding: 10rpx 10rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin: 0 20rpx;
      }

      .scroll-view_H_item_cur {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        position: relative;
        top: -6rpx;

        &::after {
          content: "";
          position: absolute;
          bottom: -6rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 90rpx;
          height: 6rpx;
          border-radius: 3px;
          background-color: #fff;
        }
      }
    }

    .dota-info {
      padding: 0 22rpx;
      height: 96rpx;
      color: #fff;
      display: flex;
      margin-top: 30rpx;
      justify-content: space-between;
      align-items: center;

      .img-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        image {
          width: 156rpx;
          height: 96rpx;
        }

        text {
          margin-left: 20rpx;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FEFEFE;
        }
      }

      .product-num {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .uni-navbar__header,
    .uni-navbar__content {
      background-color: transparent !important;
      border-bottom-width: 0px !important;
    }

    .uni-navbar__header-btns {
      width: 60rpx !important;
    }
  }

  .input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    width: 326rpx;
    background: #F5F5F5;
    opacity: 0.5;
    height: $nav-height;
    border-radius: 32rpx;
    padding: 0 32rpx;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
    position: relative;

    .icon_close {
      font-size: 26rpx;
      color: #333;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20rpx;
      z-index: 1;
    }
  }

  .input-uni-icon {
    line-height: $nav-height;
  }

  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
  }

  .qf_filterBarWrapper {
    width: 100%;
    height: 86rpx;
    line-height: 86rpx;
    display: flex;
    margin-bottom: 20rpx;
    justify-content: space-around;
    background-color: #fff;

    .screen {
      width: 100%;
      border-radius: 0px 0px 12px 12px;
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      top: 86rpx;

      text {
        flex: 20%;
        text-align: center;
        //  padding: 8rpx 20rpx;
        background: #F2F2F2;
        border-radius: 26rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-left: 10rpx;
        margin-bottom: 10rpx;

        &.current {
          background: #fff;
          border: 1rpx solid #FFA000;
          color: #FFA000;
        }
      }
    }

    .qf_filterBarWrapper-item {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .qf_filterBarWrapper-item-current {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFA000;
      font-weight: bold;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 70rpx;
        left: 50%;
        margin-left: -40rpx;
        width: 80rpx;
        height: 6rpx;
        background-color: #FFA000;
      }

      text {
        color: #FFA000 !important;
      }
    }
  }

  .dota-main {
    .dotaLts {
      width: 100%;

      .dotaLts-item {
        height: 182rpx;
        padding: 20rpx;
        background: #FFFFFF;
        display: flex;
        margin-bottom: 10rpx;
        position: relative;
        .hot-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/hot-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
           z-index:2;
        }
        
        .rec-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/rec-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
           z-index:1;
        }
        
        .news-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/news-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
          z-index:3;
        }
        image {
          flex: 1;
          width: 184rpx;
          height: 182rpx;
          border-radius: 8rpx;
        }

        .product-info {
          flex: 2.8;
          padding-left: 20rpx;
          height: 182rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .product-name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #1A1A1A;
            margin-bottom:10rpx;
          }

          .product-desc {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            margin-bottom: 5rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right:20rpx;
            .gm{
              width:102rpx;
              height:44rpx;
              background:url(https://img.5211game.com/Base/xiaochengxu/static/gm.png);
              background-size:cover;
              display: block;
            }
            text {
              margin: 0 10rpx;
            }
          }

          .product-tags {
            width: 88rpx;
            height: 28rpx;
            text-align: center;
            background: linear-gradient(90deg, #EE8924 0%, #EC632B 100%);
            border-radius: 4rpx;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 5rpx;
          }

          .product-price {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #E33F2A;

            .product-price-type {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #E33F2A;
            }

            .product-price-status {
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #E33F2A;
            }
          }
        }
      }
    }
  }

  .changeTab {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .changeTab-item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 26rpx;
      color: #fff;
      position: relative;
      padding: 0 40rpx;
    }

    .changeTab-item-cur {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 26rpx;
      color: #fff;
      position: relative;
      padding: 0 40rpx;
    }

    .changeTab-item-cur::after {
      content: "";
      width: 80rpx;
      height: 6rpx;
      background-color: #fff;
      border-radius: 6rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 15rpx;
    }
  }
</style>
